/**
 * @Title: tab3.js
 * @Description: tab2
 * @author: Fanchao
 * @date: 2021/2/5 10:25 上午
 * @version V1.0
 */
import React, { useEffect } from 'react';
import { setRatioForTitleIsValid } from 'api/index';
import { Button, message, Popconfirm, Switch, Table } from 'antd';
import styles from '@/pages/teaching-quality/compute-scheme/index.less';
import SectionTitle from 'components/SectionTitle';
import { connect } from 'umi';
import Modal3 from '@/pages/teaching-quality/compute-scheme/components/Modal3';

const Tab3 = ({ computeScheme: { tab3List }, dispatch, loading }) => {
    useEffect(() => {
        dispatch({
            type: 'computeScheme/getTab3List',
        });
    }, []);
    const updateItem = item => {
        dispatch({
            type: 'computeScheme/setTab3Show',
            payload: true,
        });
        dispatch({
            type: 'computeScheme/setItem3Data',
            payload: item,
        });
    };
    const handleDelete = item => {
        dispatch({
            type: 'computeScheme/deleteTab3Item',
            payload: {
                ratioForTitleId: item.ratioForTitleId,
            },
            callback: (result) => {
                if (result) {
                    dispatch({
                        type: 'computeScheme/getTab3List',
                    });
                }
            },
        });
    };
    const handleClickUpdateState = async (item) => {
        const params = JSON.parse(JSON.stringify(item));
        params.valid = !item.valid;
        console.log(params);
        const result = await setRatioForTitleIsValid(params);
        if (result.status === 'success') {
            dispatch({
                type: 'computeScheme/getTab3List',
            });
        } else {
            message.error(result.message);
        }
    };
    const columns = [
        {
            title: '高级职称优秀比例',
            // dataIndex: 'seniorTitleBestRatio',
            align: 'left',
            render: item => `${item.seniorTitleBestRatio}%`,
        },
        {
            title: '中、初级职称优秀比例',
            // dataIndex: 'juniorIntermediateTitleBestRatio',
            align: 'left',
            render: item => `${item.juniorIntermediateTitleBestRatio}%`,
        },
        {
            title: '是否默认',
            // dataIndex: 'teachSectionWeight',
            align: 'left',
            render: item => <Switch onClick={() => handleClickUpdateState(item)} checkedChildren="开启"
                                    unCheckedChildren="关闭" checked={item.valid}/>,
        },
        {
            title: '操作',
            align: 'left',
            render: (item) => {
                return (
                    <div>
                        <Button style={{ padding: 2, fontWeight: 'bold' }} type="link"
                                onClick={() => updateItem(item)}>修改</Button>
                        <Popconfirm title="是否要删除？" onConfirm={() => handleDelete(item)}>
                            <Button style={{ padding: 2, color: '#C21217', fontWeight: 'bold' }}
                                    type="link">删除</Button>
                        </Popconfirm>
                    </div>
                );
            },
        },
    ];
    return (
        <div className={styles.pageContainerTable}>
            <SectionTitle title={'已有职称等级优秀比例设置'}/>
            <div className={styles.tableContainer}>
                <Table
                    bordered={false} // 是否有边框
                    rowKey={'ratioForTitleId'} // 唯一key值
                    loading={loading} // 加载动画
                    columns={columns} // 表头
                    dataSource={tab3List}
                    pagination={false}
                />
            </div>
            <Modal3/>
        </div>
    );
};


export default connect(({ computeScheme, dispatch, loading }) => ({
    computeScheme,
    dispatch,
    loading: loading.effects['computeScheme/getTab3List'],
}))(Tab3);
